import React from 'react'
import { Server, Database, Users, Clock, Activity, Zap } from 'lucide-react'
import { MonitorOverview, MonitorPerformanceMetrics } from '@/types/monitor'

interface OverviewCardsProps {
  overview: MonitorOverview | null
  performanceMetrics?: MonitorPerformanceMetrics | null
}

export default function OverviewCards({ overview, performanceMetrics }: OverviewCardsProps) {
  if (!overview) {
    return null
  }

  const formatNumber = (num: number): string => {
    if (num >= 1000000) {
      return (num / 1000000).toFixed(1) + 'M'
    } else if (num >= 1000) {
      return (num / 1000).toFixed(1) + 'K'
    }
    return num.toString()
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
      {/* 集群信息 */}
      <div className="bg-white rounded-lg shadow-sm border p-6">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-sm font-medium text-gray-600">集群信息</p>
            <p className="text-2xl font-bold text-gray-900">{overview.cluster_info.broker_count}</p>
            <p className="text-sm text-gray-500">个Broker</p>
          </div>
          <Server className="w-8 h-8 text-blue-500" />
        </div>
      </div>

      {/* Topic统计 */}
      <div className="bg-white rounded-lg shadow-sm border p-6">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-sm font-medium text-gray-600">Topic数量</p>
            <p className="text-2xl font-bold text-gray-900">{overview.topic_count}</p>
            <p className="text-sm text-gray-500">{overview.total_partitions} 个分区</p>
          </div>
          <Database className="w-8 h-8 text-green-500" />
        </div>
      </div>

      {/* 消费者组 */}
      <div className="bg-white rounded-lg shadow-sm border p-6">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-sm font-medium text-gray-600">消费者组</p>
            <p className="text-2xl font-bold text-gray-900">{overview.consumer_group_count}</p>
            <p className="text-sm text-gray-500">个活跃组</p>
          </div>
          <Users className="w-8 h-8 text-purple-500" />
        </div>
      </div>

      {/* 消息速率 */}
      <div className="bg-white rounded-lg shadow-sm border p-6">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-sm font-medium text-gray-600">消息速率</p>
            <p className="text-2xl font-bold text-gray-900">
              {performanceMetrics?.kafka_metrics?.messages_per_second
                ? formatNumber(Math.round(performanceMetrics.kafka_metrics.messages_per_second))
                : '0'
              }
            </p>
            <p className="text-sm text-gray-500">消息/秒</p>
          </div>
          <Activity className="w-8 h-8 text-orange-500" />
        </div>
      </div>
    </div>
  )
}
